/*
 * 移动端优化样式
 * 突袭简历 - AI智能简历优化平台
 */

/* 移动端通用优化 */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
    
    .mobile-center {
        text-align: center;
    }
    
    .mobile-full-width {
        width: 100%;
    }
    
    .mobile-stack {
        flex-direction: column;
    }
    
    .mobile-hide {
        display: none;
    }
}

/* 触摸友好的交互元素 */
@media (hover: none) and (pointer: coarse) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
    }
    
    .touch-button {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    .touch-input {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px; /* 防止iOS缩放 */
    }
}

/* 移动端表格优化 */
@media (max-width: 768px) {
    .mobile-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .mobile-table table {
        min-width: 600px;
    }
    
    .mobile-card-table {
        display: block;
    }
    
    .mobile-card-table thead {
        display: none;
    }
    
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
    }
    
    .mobile-card-table tr {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-md);
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md);
        background: white;
    }
    
    .mobile-card-table td {
        border: none;
        padding: 8px 0;
        position: relative;
        padding-left: 40%;
    }
    
    .mobile-card-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        font-weight: 600;
        color: var(--text-secondary);
    }
}

/* 移动端表单优化 */
@media (max-width: 768px) {
    .mobile-form .form-group {
        margin-bottom: var(--spacing-md);
    }
    
    .mobile-form .form-row {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .mobile-form .form-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .mobile-form .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* 移动端导航优化 */
@media (max-width: 768px) {
    .mobile-nav-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--border-color);
        padding: var(--spacing-sm) 0;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-nav-bottom ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .mobile-nav-bottom li {
        flex: 1;
        text-align: center;
    }
    
    .mobile-nav-bottom a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.75rem;
        transition: color var(--transition-fast);
    }
    
    .mobile-nav-bottom a.active,
    .mobile-nav-bottom a:hover {
        color: var(--primary-color);
    }
    
    .mobile-nav-bottom .nav-icon {
        width: 24px;
        height: 24px;
    }
}

/* 移动端卡片优化 */
@media (max-width: 768px) {
    .mobile-card {
        margin-bottom: var(--spacing-md);
        border-radius: var(--border-radius-md);
        overflow: hidden;
    }
    
    .mobile-card-header {
        padding: var(--spacing-md);
        background: var(--background-secondary);
        border-bottom: 1px solid var(--border-color);
    }
    
    .mobile-card-body {
        padding: var(--spacing-md);
    }
    
    .mobile-card-footer {
        padding: var(--spacing-md);
        background: var(--background-secondary);
        border-top: 1px solid var(--border-color);
    }
}

/* 移动端工具类 */
@media (max-width: 768px) {
    .mobile-p-1 { padding: 8px; }
    .mobile-p-2 { padding: 12px; }
    .mobile-p-3 { padding: 16px; }
    .mobile-p-4 { padding: 20px; }
    
    .mobile-m-1 { margin: 8px; }
    .mobile-m-2 { margin: 12px; }
    .mobile-m-3 { margin: 16px; }
    .mobile-m-4 { margin: 20px; }
    
    .mobile-mb-1 { margin-bottom: 8px; }
    .mobile-mb-2 { margin-bottom: 12px; }
    .mobile-mb-3 { margin-bottom: 16px; }
    .mobile-mb-4 { margin-bottom: 20px; }
    
    .mobile-text-sm { font-size: 0.875rem; }
    .mobile-text-base { font-size: 1rem; }
    .mobile-text-lg { font-size: 1.125rem; }
    .mobile-text-xl { font-size: 1.25rem; }
    
    .mobile-flex { display: flex; }
    .mobile-block { display: block; }
    .mobile-inline-block { display: inline-block; }
    .mobile-grid { display: grid; }
    
    .mobile-justify-center { justify-content: center; }
    .mobile-justify-between { justify-content: space-between; }
    .mobile-items-center { align-items: center; }
    
    .mobile-w-full { width: 100%; }
    .mobile-w-1\/2 { width: 50%; }
    .mobile-w-1\/3 { width: 33.333333%; }
    .mobile-w-2\/3 { width: 66.666667%; }
}

/* 移动端滚动优化 */
@media (max-width: 768px) {
    .mobile-scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .mobile-scroll-x::-webkit-scrollbar {
        display: none;
    }
    
    .mobile-scroll-y {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 70vh;
    }
}

/* 移动端安全区域适配 */
@supports (padding: max(0px)) {
    .mobile-safe-area {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
    }
    
    .mobile-safe-area-bottom {
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    }
    
    .mobile-safe-area-top {
        padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    }
}

/* PWA支持 */
@media (display-mode: standalone) {
    .pwa-only {
        display: block;
    }
    
    .browser-only {
        display: none;
    }
    
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* 移动端性能优化 */
@media (max-width: 768px) {
    .mobile-gpu-accelerated {
        transform: translateZ(0);
        will-change: transform;
    }
    
    .mobile-smooth-scroll {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}